<template>
	<view class="note_box">
		<view class="note__content" v-for="(item,index) in noteInfo" :key="index">
			<view class="album">
				<view class="album__avatar">
					<u-avatar :src="item.user.avatar || '#'" mode="" style="width: 40px;height: 40px;"></u-avatar>
				</view>
				<view class="album__content">
					<view class="content_title">
						<u--text :text="item.user.username" type="primary" bold size="20"></u--text>
						<text class="c_right" v-if="isFocus(index)">
							<i class="iconfont icon-yiguanzhuhuati" style="font-size: 35rpx;color: #d81e06;"></i>
							已关注
						</text>
						<text class="c_right" v-else><i class="iconfont icon-jiaguanzhuhuati"
								style="font-size: 35rpx;"></i>
							关注
						</text>
					</view>
					<view :style="{
									marginBottom: '8px',
									width: '100%'
								}">
						<navigator :url="'../../pages/note-detail/note_detail?note_id='+item.id"
							hover-class="navigator-hover">
							<u--text :text="item.note_title" :customStyle="{
											marginRight: 100+'rpx'
										}"></u--text>
						</navigator>
					</view>
					<u-album :urls="item.images" @albumWidth="width => albumWidth = width" multipleSize="70"></u-album>
				</view>

			</view>
			<view class="operation">
				<!-- <text @click="click()"><i class="iconfont icon-fenxiangxiao" style="font-size: 30rpx;"></i></text> -->
				<text ><i class="iconfont icon-pinglun" style="font-size: 34;"></i></text>
				<text v-if="isCollection(index)"><i class="iconfont icon-shoucang"
						style="font-size: 30rpx; color:#ff0000"></i> {{item.collections.length}}</text>
				<text v-else><i class="iconfont icon-shoucang" style="font-size: 30rpx;"></i> {{item.collections.length}}</text>
				<text v-if="isThumbs_up(index)"><i class="iconfont icon-dianzan"
						style="font-size: 30rpx; color:#ff0000"></i> {{item.thumbsUps.length}}</text>
				<text v-else><i class="iconfont icon-dianzan" style="font-size: 30rpx;"></i> {{item.thumbsUps.length}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["noteInfo"],
		data() {
			return {
				albumWidth: 0,
				uid: 1,
				cid: '0',
				list: [1, 2, 3]
				//isFocus:true
			}
		},
		mounted() {
			this.uid = uni.getStorageSync("token")
		},
		methods: {
			click(){},
			isFocus(index) {
				if (this.noteInfo[index].contacts.length != 0) {
					for (let n = 0; n < this.noteInfo[index].contacts.length; n++) {
						if (this.noteInfo[index].contacts[n].uid == uni.getStorageSync("token")) {
							return true
						}
					}
					return false
				}
				return false
			},
			isCollection(index) {
				//console.log(this.noteInfo)
				if (this.noteInfo[index].collections.length != 0) {
					for (let n = 0; n < this.noteInfo[index].collections.length; n++) {
						if (this.noteInfo[index].collections[n].uid == uni.getStorageSync("token")) {
							return true
						}
					}
					return false
				}
				return false
			},
			isThumbs_up(index){
				if (this.noteInfo[index].thumbsUps.length != 0) {
					for (let n = 0; n < this.noteInfo[index].thumbsUps.length; n++) {
						if (this.noteInfo[index].thumbsUps[n].uid == uni.getStorageSync("token")) {
							return true
						}
					}
					return false
				}
				return false
			}
		}
	}
</script>

<style lang="scss">
	.note_box {
		background-color: #cdcdcd;

		.note__content {
			background-color: #FFFFFF;
			margin-bottom: 10rpx;
			padding: 10rpx 0;

			i {
				margin-right: 10rpx;
			}

			.album {
				@include flex;
				align-items: flex-start;
				margin-left: 20rpx;

				&__avatar {
					background-color: $u-bg-color;
					padding: 5px;
					border-radius: 20px;
				}

				&__content {
					margin-left: 10px;
					flex: 1;
				}

				.content_title {
					display: flex;

					.c_right {
						margin: 10rpx 120rpx;
						font-size: 27rpx;
					}
				}
			}

			.operation {
				display: flex;
				justify-content: space-around;
				border-top: 2rpx solid #cdcdcd;
				border-bottom: 2rpx solid #cdcdcd;
				padding: 10rpx 0;
				margin: 30rpx 50rpx;

				text {
					font-size: 28rpx;
				}
			}
		}
	}
</style>
